<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>监听器的使用</title>
  <script src="../js/vue.js"></script>
</head>
<body>
  <div id="app">
    <p>{{val}}</p>  
  </div>
<br>
  <script>
        let app = new Vue({
          el:"#app",
          data:{
            val:"简单对象初始值",
            obj:{
              name:"复杂对象name",
              value:"复杂对象value",
            }
        },
        watch:{
           val:function(newval,oldval){
               console.log(newval,oldval);
               console.log(this.val)
            },
            obj:{
              deep:true,
              handle:function(new_val,old_val){
                console.log(new_val,old_val)
              }
            }
        }
})
  </script>
</body>
</html>
